<template>
  <!-- 我的转发 -->
	<view>
		<view style="text-align: center;" v-if="!share_list.length">
			<image src="../../../static/index/no_data.png" class="image" mode="aspectFill"></image>
		</view>
		<scrollView height1="100vh" :isReloadComplete1="isReloadComplete" :isShowBottomView1="isShowBottomView" :isShowNodata1="isReloadComplete && !isNoData" @downdata="downdata" @updata="updata" @onScroll="onScroll" v-else>
			<view id="follow">
				<view class="container" v-for="(item, index) in share_list" @click="go_to_detail(item.id, item.status)">
					<view class="title">
						<text class="time">{{ item.insert_time }}</text>
					</view>
					<view class="content">
						<image class="img" v-if="item.face_img.indexOf('https') !== -1" :src="item.face_img" mode="aspectFill"></image>
						<image class="img" v-else :src="vuex_api_HEADER + item.face_img" mode="aspectFill"></image>
						<view class="right">
							<view class="tag">
								<image class="icon" src="../../../static/index/zjx.png" mode=""></image>
								<text>{{ item.lost_type == 0 ? '找家人' : '帮忙找' }}</text>
							</view>
							<view class="txt">{{ item.title }}</view>
							<view class="status">
								<text class="find">{{ item.status == 2 ? '进行中' : '已找回' }}</text>
								<text class="use-time">用时{{ item.lost_time }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<selfRoll :active="roll" :left="right" @scrollTo="scrollTo"></selfRoll>
		</scrollView>
	</view>
</template>

<script>
	import scrollView from '../../../components/scroll-view/scroll-view.vue';
	import selfRoll from '../../../components/self-roll/roll.vue';
	
	export default {
		components: {
			scrollView,
			selfRoll
		},
		data() {
			return {
				share_list: [],
				page: 1,
				size: 7,
				isReloadComplete: false,
				isNoData: true,
				roll: false, //返回顶部
				right: '80vw', //右侧距离
				systemHeight: 0, //系统高度
				isShowBottomView: false,
				page_count: 0
			}
		},

		onLoad() {
			this.get_my_share_list(),
			this.systemHeight = this.getSystemMsg('windowHeight');
		},
		methods: {
			// 获取我的转发列表
			get_my_share_list() {
				let self = this;
				self.iserror = true;
				self.$u.api.get_my_share_list({
					page: self.page,
					psize: self.size
				}).then((res) => {
					if(res.code == 200) {
						if(self.page === 1) {
							// 首次加载
							self.share_list = res.data.data;
							self.page_count = res.data.page_count;
						} else {
							self.share_list.push(...res.data.data)
						}
						self.iserror = false;
					} else {
						self.iserror = false;
					}
				})
			},
			go_to_detail(id, status) {
				uni.navigateTo({
					url: `../../detail/detail?id=${id}&status=${status}`
				})
			},
			// 下拉刷新
			downdata() {
				let self = this;
				self.isShowBottomView = false;
				setTimeout(() => {
					uni.$emit('downdataHD', {
						type: 'down'
					});
					self.page = 1;
					self.share_list = [];
					self.isReloadComplete = false;
					self.isNoData = true;
					self.get_my_share_list();
				}, 1000)
			},
			// 上拉加载
			updata() {
				let self = this;
				self.isShowBottomView = true;
				if(self.page < self.page_count) {
					self.page++;
				} else {
					self.isReloadComplete = true;
					self.isNoData = false;
					uni.$emit('updataHD', {
						type: 'up'
					});
					self.isShowBottomView = false;
					return 
				}
				self.get_my_share_list();
				this.isShowBottomView = false;
			},
			// 页面滚动
			onScroll(e) {
				if (e.scrollTop > this.systemHeight) {
					this.roll = true;
				} else {
					this.roll = false;
				}
			},
			/*scrollview返回远点*/
			scrollTo() {
				uni.$emit('goTop', '');
			},
			//获取系统参数
			getSystemMsg: function(key) {
				var result = '';
				uni.getSystemInfo({
					success: (res) => {
						if (key === 'windowHeight') {
							result = res.windowHeight;
						}
					}
				});
				return result;
			}
		}
}
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
}
#follow {
  .container {
    width: 684rpx;
    height: 220rpx;
    background-color: #fff;
    box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(217, 217, 217, 0.4);
    border-radius: 10rpx;
    margin: 0 auto;
    margin-top: 21rpx;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #e4e2e2;
      padding: 3rpx 13rpx;
      .time {
        color: #8f9091;
        font-size: 18rpx;
      }
      .btn {
        width: 108rpx;
        height: 29rpx;
        line-height: 29rpx;
        font-size: 18rpx;
        color: #707070;
        background: #f0eeee;
        text-align: center;
      }
    }
    .content {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .img {
        width: 174rpx;
        height: 179rpx;
        margin-right: 18rpx;
      }
      .right {
        .tag {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 110rpx;
          height: 36rpx;
          font-size: 22rpx;
          background: #ffeef0;
          color: #ff5b76;
          padding: 6rpx;
          .icon {
            width: 20rpx;
            height: 20rpx;
            margin-right: 7rpx;
          }
        }
        .txt {
          font-size: 24rpx;
          width: 454rpx;
          line-height: 36rpx;
          margin-top: 9rpx;
          margin-bottom: 17rpx;
        }
        .status {
          .find {
            width: 123rpx;
            height: 37rpx;
            background-color: #69dde8;
            color: #fff;
            font-size: 20rpx;
            text-align: center;
            padding: 8rpx 31rpx 9rpx 35rpx;
          }
          .use-time {
            width: 194rpx;
            height: 36rpx;
            font-size: 20rpx;
            background-color: #f4f4f4;
            color: #9e9e9e;
            padding: 9rpx 15rpx 8rpx 16rpx;
          }
        }
      }
    }
  }
}
</style>
